
<template>
    <div id="con" :style="container">
        <div :style="con">
            <div>
                <el-button type="text" @click="dialogVisible = true">提交图片</el-button>
                <el-dialog title="提示" :visible.sync="dialogVisible" width="80%" :before-close="handleClose">
                    <div :style="dialog">
                        <el-upload class="upload-demo" ref="upload" action="#" :on-preview="handlePreview"
                            :on-remove="handleRemove" :file-list="fileList" :auto-upload="false" multiple
                            :on-change="uploadCertificateChange" :limit="200" accept=".jpg, .jpeg, .png, .gif" :headers="{
                                token: token,
                                'Content-Type': 'multipart/form-data',
                            }" list-type="picture" :show-file-list="true" :on-success="handleSucess" :style="upload">
                            <el-button slot="trigger" size="small" type="primary">选择图片</el-button>
                            <el-button size="small" type="primary" @click="submitUpload"
                                style="margin-left: 10px;">提交</el-button>
                        </el-upload>
                    </div>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                </el-dialog>
            </div>
        </div>

        <div class="new" :style="news">
            <div v-for="(item, index) in arr" :key="index" :style="newobj">
                <span>
                    <el-image :src="item.src" class="avatar" />
                </span>
                <div>
                    <p class="p">名称：{{ item.name }}</p>
                    <p class="p">大小：{{ item.size }}</p>
                    <p class="p">类型：{{ item.name.substring(item.name.lastIndexOf('.') + 1) }}</p>
                    <el-button @click="del(index, item.name, item.size, item.url, item.src, item.only)"
                        class="p1">删除</el-button>
                </div>


            </div>
        </div>
        <div class="block">
            <el-pagination background layout="prev, pager, next" :total="length" @current-change="pager"
                :page-size="10"></el-pagination>
        </div>


    </div>
</template>
<style>
.avatar {
    width: 100px;
    height: 100px;
}

.p {
    line-height: 20px;
}
</style>
<script>

import { login2, login3, upload, imageList, del3 } from "@/api/index";
export default {
    inject: ['reload'],
    data() {
        return {
            fileList: [],
            container: {
                height: "1000px",
                borderStyle: "dotted",
                borderWidth: "1px",
            },

            news: {
                display: 'flex',
            },
            newobj: {
                marginLeft: '10px',
                width: '200px',
                height: '400px',
                borderStyle: "dotted",
                borderWidth: "1px",
            },

            con: {
                display: "flex",
                justifyContent: "center",
                alignItems: "center"
            },
            dialog: {
                marginTop: '-200px',
                display: 'flex',

            },
            upload: {

            },
            name: "",
            dialogVisible: false,
            arr: [],
            token: localStorage.getItem("token"),
            imageUrl: '',
            type: "",
            size: 0,
            pageNum: 0,
            length: 0,
            newList: [],
            ok: "",
            base64: "",
            index: -1,

        };
    },
    methods: {
        async check() {
            console.log(this.arr);
            let res = await imageList();
            this.length = res.data.length;
            this.arr = res.data;
            console.log(res);
        },
        async del(index, name, size, url, src, only) {
            console.log("删除:" + this.pageNum + index + this.length);
            console.log(this.arr)
            await del3({ name, size, url, src, only })
            let res = await imageList();
            this.length = res.data.length;
            this.arr = res.data;
            if (this.length % 10 == 0 & this.pageNum > 1) {
                this.pageNum = this.pageNum - 1;
            }
            if (this.pageNum > 1 && this.length % 10 !== 0) {
                this.arr = this.arr.slice((this.pageNum - 1) * 10, this.pageNum * 10);
            } else if (this.length % 10 == 0 && this.pageNum > 1) {
                this.arr = this.arr.slice((this.pageNum - 2) * 10, (this.pageNum - 1) * 10);
            } else {
                this.arr = this.arr.slice(0, 10)
            }
            // if (this.length % 10 == 0 && this.pageNum > 1) {
            //     this.pageNum = this.pageNum - 1;
            // }
            // this.newList.splice(index + (this.pageNum - 1) * 10, 1);
            // this.arr = this.newList;
            // console.log("删除后的数据：" + this.arr);
            // this.length = this.newList.length;
            // if (this.length % 10 == 0 && this.pageNum > 1) {
            //     console.log("为整数值");
            //     this.arr = this.arr.slice((this.pageNum - 2) * 10, this.pageNum * 10);
            // } else {
            //     console.log(this.pageNum)
            //     this.arr = this.arr.slice((this.pageNum - 1) * 10, this.pageNum * 10);
            //     console.log(this.arr)
            // }
        },

        async pager(currentPage) {
            console.log(currentPage)
            let data = await imageList();
            this.newList = data.data;
            this.arr = this.newList.slice((currentPage - 1) * 10, 10 * currentPage);
            this.pageNum = currentPage;
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        async submitUpload() {
            console.log("上传到服务器:   ");
            await this.$confirm("上传文件，是否继续？", "提示")
                .then(async () => {
                    let result2 = await login3();
                    console.log(result2)
                    if (result2.data == "token有效") {
                        console.log("有效的，上传图片")
                        let result = await login2();
                        console.log(result)
                        let aaa = await upload({ list: this.newList })
                        if (aaa.data == "上传成功了吗") {
                            this.newList = []
                        }
                        console.log(aaa)
                        if (result.data == "上传成功") {
                            const res = await imageList();
                            this.length = res.data.length;
                            this.arr = res.data;
                            this.arr = this.arr.slice(0, 10);

                            this.$message.success("上传成功");

                        }

                    }
                    return true;
                })
                .catch(() => {
                    this.$message.success("取消成功");
                    this.fileList = [];
                    return false;
                });
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {

        },
        handleSucess(res) {
            console.log("成功" + JSON.stringify(res))
        },
        uploadCertificateChange(file, fileList) {
            console.log("检查一下")
            // this.newList = [];
            console.log(file)
            file.src = URL.createObjectURL(file.raw);
            this.index = this.index + 1;
            file.index = this.index;
            file.only = Math.random().toString(36).slice(-8);
            this.newList.push(file)
        }
    },
    mounted() {
        this.check();
    }

}
</script>